<script setup lang="ts">

import type { BannerItem } from '@/types/home'
// 定义 props 接收
defineProps<{
    list: BannerItem[]
}>()

// 跳转轮播图链接页
function gotoBannerUrl(hrefUrl: string) {
    uni.navigateTo({
        url: hrefUrl
    });
}



</script>

<template>
    <view class="content">
        <view class="uni-margin-wrap swiperContainer">
            <swiper class="swiper" circular :indicator-dots="true" :autoplay="true">
                <swiper-item v-for="item in list" key="{{item.id}}" @tap="gotoBannerUrl(item.hrefUrl)">
                    <view class="swiper-item uni-bg-red">
                        <image :src="item.imgUrl"></image>
                    </view>
                </swiper-item>

            </swiper>
        </view>


    </view>
</template>

<style lang="scss">
/* swipe */
.uni-margin-wrap {
    width: 690rpx;
    width: 100%;
}

.swiper {
    height: 400rpx;
}

.swiper-item {
    display: block;
    height: 300rpx;
    line-height: 300rpx;
    text-align: center;


}

.swiper-list {
    margin-top: 40rpx;
    margin-bottom: 0;
}



.uni-common-mt {
    margin-top: 60rpx;
    position: relative;

}

.info {
    position: absolute;
    right: 20rpx;
}

.uni-padding-wrap {
    width: 550rpx;
    padding: 0 100rpx;
}
</style>
